<template>
  <div class="tree-node">
    <div class="node-label" :class="{ matched: node.matched }">
      <!-- ✅ 只让文字部分可点击 -->
      <span class="label-text" @click.stop="handleNodeClick">{{ node.label }}</span>

      <!-- ✅ 箭头部分阻止事件冒泡 -->
      <span v-if="node.children && node.children.length" class="toggle-icon" @click.stop="setStater">
        {{ node.expanded ? "▼" : "▶" }}
      </span>
    </div>
    <!-- 子节点递归渲染 -->
    <div v-if="modelValue && node.children" class="children">
      <TreeNode v-for="(child, idx) in node.children" :key="`${idx}aaab`" :node="child" :search-query="searchQuery"
        v-model="child.expanded" @node-click="$emit('node-click', $event)" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  node: {
    type: Object,
    required: true
  },
  searchQuery: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'node-click']);

function handleNodeClick() {
  emit('node-click', props.node); // ✅ 确保这里正确 emit
}

function setStater() {
  console.log('点击开关');
  // console.log(props.modelValue);
  // props.modelValue
  emit('update:modelValue', !props.modelValue)
  // modelValue.value = !modelValue.value
}
</script>

<style scoped>
.tree-node {
  position: relative;
  padding-left: 1rem;
}

.node-label {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
}

.node-label:hover {
  background-color: #f0f0f0;
  color: #000;
}

.matched {
  /* background-color: #ffeeba; */
  font-weight: bold;
  /* color: #000; */
  border-radius: 10px;
  margin-top: 10px;
}

.toggle-icon {
  width: 20%;
  /* border: 1px solid #ccc; */
  margin-left: 0.5rem;
  user-select: none;
}

.children {
  margin-left: 1rem;
}

::-webkit-scrollbar {
  display: none;
}

.label-text {
  /* border: 1px solid red; */
  width: 80%;

}
</style>

<!-- <style scoped>
.tree-node {
  position: relative;
  padding-left: 1rem;
}

.node-label {
  margin-top: calc(10px / 2.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: calc(10px / 2.2);
}

.node-label:hover {
  background-color: #f0f0f0;
  color: #000;
}

.matched {
  /* background-color: #ffeeba; */
  font-weight: bold;
  /* color: #000; */
  border-radius: calc(10px / 2.2);
  margin-top: calc(10px / 2.2);
}

.toggle-icon {
  width: 20%;
  /* border: 1px solid #ccc; */
  margin-left: 0.5rem;
  user-select: none;
}

.children {
  margin-left: 1rem;
}

::-webkit-scrollbar {
  display: none;
}

.label-text {
  /* border: 1px solid red; */
  width: 80%;

}
</style> -->
<!-- 详细内容 -->